<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords">
          <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable style="width: 200px" />
          <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <template #header>
        <div class="justify-between">
          <el-button v-if="permissions.create" type="primary" @click="handelAdd"> 申请专户 </el-button>
        </div>
      </template>
      <el-table v-loading="loading" :data="tableList" highlight-current-row border>
        <el-table-column
          v-if="currentSystem == 'SysUser'"
          key="projectName"
          label="项目名称"
          align="center"
          prop="projectName"
          width="150"
        />
        <el-table-column
          v-if="currentSystem == 'SysUser'"
          key="projectNum"
          label="项目编号"
          align="center"
          prop="projectNum"
          width="150"
        />
        <el-table-column key="code" label="流水号" align="center" prop="code" width="120" />
        <el-table-column key="username" label="账户名称" align="center" prop="username" width="160" />
        <el-table-column key="accountStatusName" label="账户状态" width="110" align="center" prop="accountStatusName">
          <template #default="scope">
            <el-tag v-if="scope.row.accountStatus == 1" type="info"> {{ scope.row.accountStatusName }}</el-tag>
            <el-tag v-if="scope.row.accountStatus == 2"> {{ scope.row.accountStatusName }}</el-tag>
            <el-tag v-if="scope.row.accountStatus == 3" type="warning"> {{ scope.row.accountStatusName }}</el-tag>
            <el-tag v-if="scope.row.accountStatus == 4" type="warning"> {{ scope.row.accountStatusName }}</el-tag>
            <el-tag v-if="scope.row.accountStatus == 5" type="danger"> {{ scope.row.accountStatusName }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column key="bankNo" label="银行账号" width="" align="center" prop="bankNo" />
        <el-table-column key="bankName" label="开户银行" align="center" width="130" prop="bankName" />
        <el-table-column key="bankMark" label="银行是否对账户设置特殊标识" width="195" align="center" prop="bankMark">
          <template #default="scope">
            {{ scope.row.bankMark ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          key="balance"
          label="专户余额(万元)"
          width="140"
          align="center"
          prop="balance"
          :formatter="
            (item) =>
              Except(item.balance, 10000)
                .toString()
                .replace(/^(.*\..{4}).*$/, '$1')
          "
        />
        <el-table-column key="createTime" label="申请时间" width="160" align="center" prop="createTime" />
        <el-table-column
          key="accountCreateTime"
          label="专户签约时间"
          width="160"
          align="center"
          prop="accountCreateTime"
        />
        <el-table-column key="cancelTime" label="账户注销日期" width="160" align="center" prop="cancelTime" />
        <el-table-column label="操作" fixed="right" width="160">
          <template #default="scope">
            <div v-hasData="scope.row.hasEdit" style="display: inline">
              <el-button
                v-if="permissions.delete && scope.row.accountStatus == 1"
                type="primary"
                link
                size="small"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
              <el-button
                v-if="scope.row.accountStatus == 1 && permissions.auditing"
                v-hasPerm="[`sys:specialaccount:audit`]"
                type="primary"
                link
                size="small"
                @click="handelAudit(scope.row)"
              >
                审批
              </el-button>
              <el-button
                v-if="scope.row.accountStatus == 2 && permissions.update"
                v-hasPerm="[`sys:specialaccount:update`]"
                type="primary"
                link
                size="small"
                @click="handelAudit(scope.row)"
              >
                修改信息
              </el-button>
            </div>

            <el-button v-if="permissions.detail" type="primary" link size="small" @click="handelDetail(scope.row)">
              详情
            </el-button>
            <!-- v-if="scope.row.accountStatus === 1 && permissions.print" -->
            <el-button
              v-if="scope.row.accountStatus === 1 && permissions.print"
              type="primary"
              link
              size="small"
              @click="handelPrint(scope.row)"
            >
              补打申请单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 新增/修改弹窗 -->
    <addForm v-if="dialogAddOrEdit.visible" :dialog-add-or-edit="dialogAddOrEdit" @send-close="sendClose"></addForm>

    <detail v-if="dialogDetail.visible" :dialog-detail="dialogDetail" @send-close="sendClose"></detail>
    <audit v-if="dialogAudit.visible" :dialog-audit="dialogAudit" @send-close="sendClose"></audit>
    <!-- 开户打印模板 -->
    <account-template
      v-if="dialogPrint.visible"
      :dialog-print="dialogPrint"
      @send-print-close="sendPrintClose"
    ></account-template>
  </div>
</template>

<script lang="ts" setup>
import addForm from "./addForm.vue";
import detail from "./detail.vue";
import audit from "./audit.vue";

import { Except } from "@/utils/decimal";
import accountTemplate from "@/views/manager/common/printTemplate/accountTemplate.vue";
import { QuerySpecialAccountList, DeleteProjectSpecialAccount } from "@/api/specialaccount/index";

const permissions = ref({
  create: false,
  update: false,
  delete: false,
  detail: false,
  auditing: false,
  print: false,
});

const currentSystem = ref(localStorage.getItem("usertypeName"));
const isLumpContractor = ref(localStorage.getItem("isLumpContractor"));
if (currentSystem.value == "SysUser") {
  permissions.value.auditing = true;
  permissions.value.detail = true;
  permissions.value.update = true;
}

if (currentSystem.value == "Manager") {
  permissions.value.create = true;
  permissions.value.detail = true;
  permissions.value.delete = true;
  permissions.value.print = true;
}
if (currentSystem.value == "Constructor" || currentSystem.value == "Commander" || currentSystem.value == "Corp") {
  permissions.value.detail = true;
}

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<any[]>();
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  keywords: "",
});

const dialogAddOrEdit = reactive<DialogOption>({
  visible: false,
});
const dialogAudit = reactive<DialogOption>({
  visible: false,
});

const dialogDetail = reactive<DialogOption>({
  visible: false,
});

const dialogPrint = reactive<any>({
  visible: false,
});

/* 列表查询 */
const handleQuery = async () => {
  loading.value = true;
  let list = await QuerySpecialAccountList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageNum = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
};

const handelAdd = () => {
  dialogAddOrEdit.visible = true;
  dialogAddOrEdit.title = "申请专户";
  dialogAddOrEdit.footBtn = "提交申请";
};

const handelAudit = (row: any) => {
  dialogAudit.visible = true;
  dialogAudit.title = "开户审批";
  dialogAudit.footBtn = "确认提交";
  dialogAudit.id = row.id;
};

const handelDetail = (row: any) => {
  dialogDetail.visible = true;
  dialogDetail.title = "详情";
  dialogDetail.id = row.id;
};

/* 开户打印 */
const handelPrint = (row: any) => {
  dialogPrint.visible = true;
  dialogPrint.title = "打印";
  dialogPrint.footBtn = "打印";
  dialogPrint.id = row.id;
  dialogPrint.dataInfo = row;
};

/* 删除 */
const handleDelete = async (row: any) => {
  let confirm = await ElMessageBox.confirm("确认删除?", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => true)
    .catch(() => false);
  if (!confirm) {
    ElMessage({
      type: "info",
      message: "已取消！",
    });
    return;
  }

  let delInfo = await DeleteProjectSpecialAccount(row.id);
  if (delInfo.type === 0) {
    if (delInfo.success) {
      ElMessage.success("专户信息删除成功!");
      handleQuery();
    } else {
      ElMessage.error(delInfo.msg);
    }
  } else {
    ElMessage.error(delInfo.msg);
  }
};

/* 关闭弹窗并刷新列表 */
function sendClose(query: any, data: any) {
  dialogAddOrEdit.visible = false;
  dialogDetail.visible = false;
  dialogDetail.id = undefined;
  dialogAudit.visible = false;
  dialogAudit.id = undefined;
  if (query) {
    handleQuery();
  }
  if (data) {
    dialogPrint.visible = true;
    dialogPrint.title = "打印";
    dialogPrint.footBtn = "打印";
    dialogPrint.id = data.id;
    dialogPrint.dataInfo = data;
  }
}

/* 关闭打印弹窗 */
function sendPrintClose() {
  dialogPrint.visible = false;
}

onMounted(() => {
  handleQuery();
});
</script>

<style lang="less" scoped>
:deep(.detail .el-dialog__body) {
  height: var(--mobileAddFormHeight);
  overflow-y: auto;
}
</style>
